<template>
  <div>
    <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- <van-cell is-link title="上传头像" @click="show = true" /> -->
    <van-field name="uploader" label="文件上传" multiple :max-count="1" round >
  <template #input>

<van-uploader v-model="fileList" multiple  :max-count="1" :after-read="afterRead" />
  </template>
</van-field>
    <!-- 编辑名称 -->
   <van-form @submit="onSubmit">
  
  <van-field
    v-model="names"
    name="用户名"
    label="名称"
    placeholder="请填写名称"
    :rules="[{ required: true, message: '请填写用户名称' }]"
  />
</van-form>
    <van-cell-group v-if="show2">
      <van-field v-model="value" label="请输入名称" show-cancel-button placeholder="请输入用户名称" />
      <van-button round type="info" style="margin:5px; height:30px;" @click="show2 = false">输入完成</van-button>
    </van-cell-group>
    <!-- 性别选择 -->
    <van-cell is-link :title="value2" @click="show3 = true" />
    <van-radio-group v-model="radio" v-if="show3">
      <van-radio name="1" @click="sett">男</van-radio>
      <van-radio name="2" @click="sett">女</van-radio>
      <van-button round type="info" style="margin:5px; height:30px;" @click="show3 = false">输入完成</van-button>
    </van-radio-group>
    <van-cell title="选择生日" show-subtitle="true" :value="date" @click="show4 = true" />
    <van-calendar v-model="show4" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
  </div>
</template>

<script>

export default {
  data() {
    return {
      fileList: [],
      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      show2: false,
      show3: false,
      show4: false,
      value: '',
      value2: '点击选择性别',
      value4:'请输入名称',
      radio: 1,
      set: '',
      minDate: new Date(1995, 0, 1),
      maxDate: new Date(2022, 0, 31),
      date: '',
      names:'',
       fileList: [],
uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],

    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    sett() {
      if (this.radio == 1) {
        this.set = '男'
        console.log(this.set)
      } else if (this.radio == 2) {
        this.set = '女'
        console.log(this.set)
      }
    },
    formatDate(date) {
      return `${date.getYear() + 1900}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show4 = false;
      this.date = this.formatDate(date);
      console.log(this.date)
    },
   onClickLeft() {
console.log("我是返回图标")
this.$router.back()
    },
        onSubmit(values) {
      console.log('submit', values);
    },
  },
};
</script>

<style lang="less">
.add {
  text-align: left;
  border: 1px solid rgba(30, 25, 25, 0.307);
  border-radius: 15px;
  overflow: hidden;
  height: 90px;
}

// .add1 {
//   position: absolute;
//   top: 0;
//   right: 0;
// }

.content {
  padding: 16px 16px 160px;
}

// .yl {
//   float: right;

// }

// .van-cell__title,
// .van-cell__value {
//   -webkit-box-flex: 1;
//   -webkit-flex: 1;
//   flex: 1;
//   text-align: left;
//   margin: 10px;
// }


</style>
<style>
.van-image__img, .van-image__error, .van-image__loading {
    display: block;
    width: 70%;
    height: 70%;
}
</style>